<template>
  <div class="footer">
    <div class="service container">
      <div class="column">
        <div class="title">客户服务</div>
        <div class="btn">
          <i class="iconfont icon-wo"></i>
          在线客服
        </div>
        <div class="btn">
          <i class="iconfont icon-dianhua1"></i>
          用户反馈
        </div>
      </div>
      <div class="column">
        <div class="title">何为严选</div>
        <div class="message">网易原创生活类电商品牌，秉承网易一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到优质的商品</div>
      </div>
      <div class="column">
        <div class="title">扫码下载严选APP</div>
        <!-- 二维码 -->
        <qriously value="17625907745" :size="104"></qriously>
      </div>
    </div>
    <div class="site-ensure">
      <div class="container">
        <!-- 无忧换货等提示消息 -->
        <div class="line">
          <div class="column">
            <Icon class="mar-16" name="icon-anquan" size="40" color="write"></Icon>
            30天无忧退换货
          </div>
          <div class="column">
            <Icon class="mar-16" name="icon-distribution" size="40" color="write"></Icon>
            满88元免邮费
          </div>
          <div class="column">
            <Icon class="mar-16" name="icon-youyouyanxuan" size="40" color="write"></Icon>
            品质保证
          </div>
        </div>
        <!-- 关于我们等提示信息 -->
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <a :href="item.path">{{ item.name }}</a>
          </li>
        </ul>
        <p>束豪专用©2018-2020，如有雷同，纯属巧合。 开发于南京江宁区</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { path: '/', name: '关于我们' },
        { path: '/', name: '帮助中心' },
        { path: '/', name: '售后服务' },
        { path: '/', name: '配送与验收' },
        { path: '/', name: '商务合作' },
        { path: '/', name: '企业采购' },
        { path: '/', name: '开放平台' },
        { path: '/', name: '搜索推荐' },
        { path: '/', name: '友情链接' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable";

.footer {
  background: @write;
  border-top: 1px solid @border-color2;
  .service {
    padding-top: 60px;
    padding-bottom: 34px;
    text-align: center;
    overflow: hidden;
    .column {
      float: left;
      width: 33.3333%;
      padding: 0px 36px;
      .title {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 28px;
        line-height: 1;
      }
      .btn {
        background-color: @write;
        border: 1px solid @border-color2;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        width: 80px;
        height: 100px;
        padding-top: 25px;
        text-align: center;
        margin-left: 30px;
        .iconfont {
          display: block;
          font-size: 26px;
          margin-bottom: 10px;
        }
        &:hover {
          color: @font-color-golden;
        }
      }
      .message {
        font-size: 13px;
        line-height: 24px;
        margin-bottom: 22px;
        text-align: left;
      }
    }
  }
  .site-ensure {
    background-color: @bg-footer;
    height: 204px;
    padding-top: 37px;
    .line {
      border-bottom: 1px solid @border-footer;
      overflow: hidden;
      margin-bottom: 30px;
      padding-bottom: 30px;
      .column {
        align-items: center;
        color: @write;
        display: flex;
        float: left;
        font-size: 18px;
        width: 33.3333%;
        padding: 0px 36px;
        height: 52px;
        justify-content: center;
        .mar-16 {
          margin-right: 16px;
        }
      }
    }
    ul {
      margin: 0 auto;
      width: fit-content;
      li {
        border-right: 2px solid @font-color-grey;
        display: inline;
        padding: 0px 12px;
        a {
          color: @font-color-grey;
          text-decoration: none;
        }
        &:last-child {
          border-right: 0px;
        }
      }
    }
    p {
      color: @font-color-grey;
      text-align: center;
      padding: 6px 0px;
    }
  }
}
</style>
